﻿<template>
    <l-layout class="l-tab-page erpCase" v-show="!lr_loadPage">

        <l-panel v-if="!showRecord" title="回款管理">
            <template #toolLeft>
                <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_ReceivedDateQRange>
                        <l-date format="yyyy-MM-dd" dateType="daterange" v-model="queryData.f_ReceivedDateQRange"
                            :placeholder="$t('please select')" range-separator="-" start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </template>
                    <template #f_FinallyDateQRange>
                        <l-date format="yyyy-MM-dd" dateType="daterange" v-model="queryData.f_FinallyDateQRange"
                            :placeholder="$t('please select')" range-separator="-" start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </template>
                    <template #f_GatherState>
                        <l-select :options="f_DeleteMarkOptions" v-model="queryData.f_GatherState" />
                    </template>
                </l-query2>
            </template>
            <template #toolRight>
                <l-tool-btns :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()">
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" :loading="tableLoading" :columns="lr_getPageColumns(columns)"
                :dataSource="tableData" :key="Math.random()" :isPage="true" :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
                <template v-for="(col, index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))"
                    v-slot:[col.prop]="scope">
                    <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
                        :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
                        :setting="col.setting" :key="index"></l-value-to-label>
                </template>
                <!-- <template v-slot:f_PurchaseState="scope">
                    <span v-if="scope.row.f_PurchaseState == 1">
                        {{ $t("部分采购") }}
                    </span>
                    <span v-else-if="scope.row.f_PurchaseState == 2">
                        {{ $t("已采购") }}
                    </span>
                    <span v-else>
                        {{ $t("未采购") }}
                    </span>
                </template> -->
                <template v-slot:f_GatherState="scope">
                    <el-tag type="success" v-show="scope.row.f_GatherState == '已完成'" size="mini">{{
                        scope.row.f_GatherState
                    }}</el-tag>
                    <el-tag type="warning" v-show="scope.row.f_GatherState == '未开始'" size="mini">{{
                        scope.row.f_GatherState
                    }}</el-tag>
                    <el-tag v-show="scope.row.f_GatherState == '进行中'" size="mini">{{ scope.row.f_GatherState }}</el-tag>
                </template>
                <l-table-btns :btns="tableBtns" :btnNum="4" @click="lr_handleTableBtnClick"></l-table-btns>
            </l-table>
        </l-panel>

        <!-- Details查看 -->
        <transition name="el-zoom-in-center">
            <l-panel v-if="showRecord">
                <template #title>
                    <el-page-header @back="outRecord" :content="$t(showTitle)" />
                    <el-button size="mini" type="primary" @click="addRecord" v-show="formEditRow.f_UnpaidAmount > 0">{{
                        $t('Add回款记录')
                    }}</el-button>
                </template>
                <!-- 回款记录 -->
                <record-form ref="recordForm" :showRecord="showRecord" :isReadOnly="formDetails"
                    :id="formEditRow.f_Id"></record-form>
            </l-panel>
        </transition>
        <!--表单-->
        <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="522" :width="487" @ok="handleSave"
            @close="handleCloseForm" @opened="handleOpenedForm">
            <add-record v-if="formTitle == 'Add回款记录'" ref="addRecord" :isReadOnly="formDetails"
                :unpaidAmount="formEditRow.f_UnpaidAmount" :id="formEditRow.f_Id"></add-record>
            <my-form ref="form" :isReadOnly="formDetails" v-else></my-form>
        </l-dialog>

    </l-layout>
</template>

<script>
import MyForm from './form'
import RecordForm from './recordForm'
import AddRecord from './addRecord'
const api = window.$api.erpcase.customerGather

export default {
    components: {
        MyForm,
        RecordForm,
        AddRecord,
    },
    data() {
        return {
            // 回款记录查看
            showRecord: false,

            lr_isPage: true,
            moduleCode: 'ERP_CustomerReturn',

            // query参数
            queryData: {
                f_ReceivedDateQRange: '',
                f_FinallyDateQRange: '',
                f_GatherState: '',
            },

            queryItems: [
                { label: '计划回款日期', prop: 'f_ReceivedDateQRange' },
                { label: '最迟回款日期', prop: 'f_FinallyDateQRange' },
                { label: '状态', prop: 'f_GatherState' },
            ],

            // 表格参数
            tableLoading: false,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: [
                { label: '客户名称', prop: 'f_Name', align: 'left', dataType: 'input',width: 200,isNotAutoWrap:true,},
                { label: '计划回款金额', prop: 'f_WaitAmount', align: 'left', dataType: 'input',width:150,isNotAutoWrap:true, },
                { label: '已回款金额', prop: 'f_AlreadyAmount', align: 'left', dataType: 'input',width:150,isNotAutoWrap:true, },
                { label: '未回款金额', prop: 'f_UnpaidAmount', align: 'left', dataType: 'input' ,width:150,isNotAutoWrap:true,},
                { label: '计划回款日期', prop: 'f_ReceivedDate', align: 'left', dataType: 'datetime', format: 'yyyy-MM-dd',width:130,isNotAutoWrap:true, },
                { label: '最迟回款日期', prop: 'f_FinallyDate', align: 'left', dataType: 'datetime', format: 'yyyy-MM-dd',width:130,isNotAutoWrap:true, },
                { label: '逾期天数', prop: 'f_OverdueDays', align: 'left', dataType: 'input',width:130,isNotAutoWrap:true, },
                { label: '合同标题', prop: 'f_Title', align: 'left', dataType: 'input',width:230 },
                { label: '合同负责人', prop: 'f_Principal', align: 'left', dataType: 'user',width:130,isNotAutoWrap:true, },
                { label: '创建日期', prop: 'f_CreateDate', align: 'left', dataType: 'datetime', format: 'yyyy-MM-dd',width:130,isNotAutoWrap:true,},
                { label: '创建人', prop: 'f_CreateUserName', align: 'left', dataType: 'input',width:130,isNotAutoWrap:true, },
                { label: '状态', prop: 'f_GatherState', align: 'left', dataType: 'input',width:130,isNotAutoWrap:true, },
            ],
            tableBtns: [
                { prop: 'Collection', label: '回款记录', width: 80 },
                { prop: 'Edit', label: 'Edit' },
                { prop: 'Delete', label: 'Delete' },
                { prop: 'Details', label: 'Details' },
            ],

            // 表单参数
            formVisible: false,
            formTitle: '',
            formEditRow: null,
            formEdit: false,
            formDetails: false,
        }
    },
    computed: {


        f_DeleteMarkOptions() {
            return [{ "value": "", "label": "全部" }, { "value": "已完成", "label": "已完成" }, { "value": "未完成", "label": "未开始" }, { "value": "进行中", "label": "进行中" }]
        },

    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()


        },
        // 
        outRecord(){
            this.showRecord = false
            this.loadTableData()
        },

        handleSearch() {
            this.loadTableData()
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let queryData = this.$deepClone(this.queryData)

            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_Id'
            let data = await this.$awaitWraper(api.getPage(queryData))
            if (data != null) {
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else {
                this.tableData = []
            }
            this.tableLoading = false
        },

        async handleCollection($index, row) {
            this.showRecord = true
            this.formDetails = false
            this.formEditRow = row
            this.showTitle = '回款记录'
            // console.log("回款记录",row)

        },
        // Add回款记录
        addRecord() {
            this.formEdit = false
            this.formDetails = false
            this.handleShowForm('Add回款记录')
        },
        handleAdd() {
            this.formEdit = false
            this.formDetails = false
            this.handleShowForm('Add')
        },
        handleEdit($index, row) {
            this.formEdit = true
            this.formDetails = false
            this.formEditRow = row
            this.handleShowForm('Edit')
        },
        handleDelete($index, row) {
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--
                await api.remove(row.f_Id)
                this.$message({
                    type: 'success',
                    message: this.$t('Delete  success')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled!')
                })
            })
        },
        handleDetails($index, row) {
            this.formEdit = true
            this.formDetails = true
            this.formEditRow = row
            this.handleShowForm('Details')
        },

        async handleSave(showLoading, hideLoading) {
            showLoading('saving data...')
            if (this.formTitle == 'Add回款记录') {
                if (await this.$refs.addRecord.validateForm()) {
                    const res = await this.$refs.addRecord.saveForm({ isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.$refs.recordForm.loadFormData({ keyValue: this.formEditRow.f_Id, init: true })
                        this.formVisible = false

                    }
                }
                // console.log("indexAdd回款记录")

            } else {
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit ? this.formEditRow.f_Id : '', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
            }
            hideLoading()

        },

        handleShowForm(text) {
            this.formTitle = text
            this.formVisible = true
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('Loading data...')
                if (this.formTitle == 'Add回款记录') {
                    await this.$refs.addRecord.loadFormData({ keyValue: this.formEditRow.f_Id })
                } else {
                    await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                }


                hideLoading()
            }
        },
        handleCloseForm() {
            if (this.formTitle == 'Add回款记录') {
                this.$refs.addRecord.resetForm()
            } else {
                this.$refs.form.resetForm()
            }
        }
    }
}
</script>
